<template>
    <!-- html -->
    <div class="Lovetalk">
        <button @click="getLovetalk">获取一句土味情话</button>
        <ul>
            <li v-for="item in Lovetalk" :key="item.id">{{ item.title }}</li>
        </ul>
    </div>
</template>


<!-- npm i vite-plugin-vue-setup-extend -D -->
<script lang="ts" setup name='Lovetalk'>
// import { reactive } from 'vue' 
import { useLovetalk } from '@/store/lovetalk'
// import axios from "axios"
import { nanoid } from 'nanoid'
import { storeToRefs } from 'pinia'
// import { idText } from 'typescript'

const Lovetalks = useLovetalk()
//storeToRefs只会关注store中的数据，不会对方法进行ref包裹
const { Lovetalk } = storeToRefs(Lovetalks)
//订阅事件，监听值得变化
Lovetalks.$subscribe((mutate, state) => {
    // console.log('数据发生了变化',mutate,state)
    localStorage.setItem("talkdata", JSON.stringify(state.Lovetalk))
})

// let Lovetalk = reactive([
//     { id: "1", title: "111111111111111" },
//     { id: "2", title: "222222222222222" },
//     { id: "3", title: "333333333333333" }
// ])

async function getLovetalk() {
    // let axi = await axios.get("https://api.uomg.com/api/rand.qinghua?format=json")
    // let obj = { id: nanoid(), title: nanoid() }
    // Lovetalk.unshift(obj)
    Lovetalks.getLovetalk()
}
</script>

<style scoped>
/* 样式 */
.Lovetalk {
    background-color: skyblue;
    border-radius: 10px;
    padding: 20px;
}
</style>